<template>
  <div class="create">
    <div class="left-search scroll-box">
      <el-scrollbar>
        <div class="box">
          <Search />
        </div>
      </el-scrollbar>
    </div>
    <div class="center-goods">
      <Goods />
    </div>
    <div class="right-form scroll-box">
      <el-form ref="formRef" :model="form" :rules="rules" label-position="top">
        <el-form-item :label="plugin.lang('inbound.supplier_id')"> 
          <el-select v-model="form.supplier_id" filterable remote clearable :remote-method="onSupplier" :loading="supplier.loading" @change="onSupplierChange" style="width: 100%">
            <el-option
              v-for="item in supplier.list"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item :label="plugin.lang('inbound.code')" prop="code">
          <el-input v-model="form.code"></el-input>
        </el-form-item>
        <el-form-item :label="plugin.lang('inbound.name')" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
      </el-form>
      <div class="tools">
        <el-button type="primary" :loading="loading" @click="onUpdate">{{ plugin.lang('inbound.btn.submit') }}</el-button>
        <el-button type="success" @click="importRef.open()">{{ plugin.lang('inbound.btn.import') }}</el-button>
        <Import ref="importRef" :form="importForm" @load="importLoad" />
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive } from 'vue'
import app from '@/app'
import { get as getGoods } from '@/api/store/goods'
import model from '../../model/create'
import { get as getSupplier } from '@/api/erp/supplier'

import Search from './search'
import Goods from './goods'
import Import from '@/components/import'

export default {
  components: {
    Search,
    Goods,
    Import
  },
  setup() {
    // 表单
    const formRef = ref(null)

    // 放置到表单中
    const form = model.data

    // 验证
    const rules = {
      name: [
        { required: true, message: ' ', trigger: 'blur' }
      ],
      code: [
        { required: true, message: ' ', trigger: 'blur' }
      ]
    }

    // 更新
    const loading = ref(false)
    const onUpdate = () => {
      formRef.value.validate(valid => {
        if (valid) {
          loading.value = true
          model.post().finally(() => {
            loading.value = false
          })
        }
      })
    }

    // 导入组件
    const importRef = ref(null)

    // 导入表单
    const importForm = {
      code: app.plugin.index.lang('form.code'),
      number: app.plugin.index.lang('form.number'),
      count: app.plugin.index.lang('inbound.goods.count'),
      price: app.plugin.index.lang('inbound.goods.price')
    }

    // 开始导入
    const importLoad = () => {
      importRef.value.load(data => {
        return new Promise((resolve) => {
          // 唯一数据
          if(!data.code && !data.number) {
            return resolve(false)
          }
          // 查询商品
          getGoods(data).then(res => {
            if(res.data.length > 0) {
              // 导入商品
              model.add(res.data[0])
              // 指定数量
              model.updateCount(data.count)
              // 指定进货价
              model.updatePrice(data.price)
              resolve(true)
            }
          }).finally(() => {
            resolve(false)
          })
        })
      })
    }

    // 选择供货商
    const supplier = reactive({
      list: [],
      loading: false
    })
    const onSupplier = (name) => {
      supplier.loading = true
      getSupplier({ name }).then(res => {
        supplier.list = res.data
      }).finally(() => supplier.loading = false)
    }
    const onSupplierChange = () => {
      if(form.value.supplier_id) {
        form.value.supplier_name = supplier.list.find(item => item.id == form.value.supplier_id)?.name
      } else {
        form.value.supplier_id = undefined
        form.value.supplier_name = undefined
      }
      
    }

    onSupplier()

    return {
      lang: app.lang,
      plugin: app.plugin.index,
      model,
      formRef,
      form,
      rules,
      loading,
      onUpdate,
      importRef,
      importForm,
      importLoad,
      
      supplier,
      onSupplier,
      onSupplierChange
    }
  }
}
</script>